<template>
<!-- 采购单据查询 -->
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form  :inline="true"
                  ref="queryRef"
                  :model="queryParams"
                  label-width="100px">
          <el-form-item label="系统单号" prop="systematicReceipt">
            <el-input
              v-model="queryParams.systematicReceipt"
              placeholder="请输入"
              style="width: 200px;"
              clearable/>
          </el-form-item>
          <el-form-item label="采购单号" prop="originalReceipt">
            <el-input
              v-model="queryParams.originalReceipt"
              placeholder="请输入"
              style="width: 200px;"
              clearable/>
          </el-form-item>
          <el-form-item label="单据类型" prop="receiptType">
            <el-select
                v-model="queryParams.receiptType"
                placeholder="单据类型"
                clearable
                style="width: 200px;">
                <el-option
                  v-for="dict in receipt_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
            </el-select>
          </el-form-item>
          <el-form-item label="调入仓库" prop="warehousingIds">
            <el-select style="width: 200px;" v-model="queryParams.warehousingIds" placeholder="请选择">
                <el-option
                    v-for="item in warehouseOptions"
                    :key="item.warehouseId"
                    :label="item.warehouseName"
                    :value="item.warehouseId"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="调出仓库" prop="retrievalIds">
            <el-select style="width: 200px;" v-model="queryParams.retrievalIds" placeholder="请选择">
                <el-option
                    v-for="item in warehouseOptions"
                    :key="item.warehouseId"
                    :label="item.warehouseName"
                    :value="item.warehouseId"
                ></el-option>
            </el-select>
            </el-form-item>
          <el-form-item label="经手人" prop="userIds">
            <el-select style="width: 200px;" v-model="queryParams.userIds" placeholder="请选择">
              <el-option
                  v-for="item in userOptions"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商" prop="supplierIds">
            <el-select style="width: 200px;" v-model="queryParams.supplierIds" placeholder="请选择">
              <el-option
                  v-for="item in supplierOptions"
                  :key="item.supplierId"
                  :label="item.supplierName"
                  :value="item.supplierId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="货品编号" prop="productCode">
            <el-input
              v-model="queryParams.productCode"
              placeholder="请输入货品编号"
              style="width: 200px;"/>
          </el-form-item>
          <el-form-item label="货品名称" prop="productName">
            <el-input
              v-model="queryParams.productName"
              placeholder="请输入货品名称"
              style="width: 200px;"/>
          </el-form-item>
          <el-form-item label="创建时间" style="width: 388px;">
            <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="Search"
                @click="handleQuery"
                v-hasPermi="['system:purchase:PurchaseOrderQuery']"
                >查询</el-button>
                <el-button
                type="success"
                icon="Search"
                @click="handleDetailQuery"
                v-hasPermi="['system:purchase:PurchaseDetailOrderQuery']"
                >明细查询</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="21">
          <span>查询结果</span>
        </el-col>
        <el-col :span="1.5">
          <el-button
            v-if="purchaseHead"
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['system:purchase:purchaseOrderExport']"
          >导出</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            v-if="purchaseDetail"
            type="danger"
            plain
            icon="Download"
            @click="handleDetailExport"
            v-hasPermi="['system:purchase:purchaseDetailOrderExport']"
          >明细导出</el-button>
        </el-col>
      </el-row>

      <!-- 头表数据 -->
      <el-table
        border
        v-if="purchaseHead"
        v-loading="loading"
        :data="purchaseOrderList">
        <el-table-column label="序号" align="center" type="index" width="60" />
        <el-table-column label="系统单号" align="center" prop="systematicReceipt" width="180"/>
        <el-table-column label="采购单号" align="center" prop="originalReceipt"/>
        <el-table-column label="单据类型" align="center" prop="receiptType">
          <template #default="scope">
            <dict-tag :options="receipt_type" :value="scope.row.receiptType" />
          </template>
        </el-table-column>
        <el-table-column label="单据状态" align="center" prop="receiptStatus">
          <template #default="scope">
            <dict-tag :options="receipt_status" :value="scope.row.receiptStatus" />
          </template>
        </el-table-column>
        <el-table-column label="发生日期" align="center" prop="invoiceDate"/>
        <el-table-column label="调入仓库" align="center" prop="warehousing.warehousingName"/>
        <el-table-column label="调出仓库" align="center" prop="retrieval.retrievalName"/>
        <el-table-column label="经手人" align="center" prop="sysUser.userName"/>
        <el-table-column label="供应商" align="center" prop="supplier.supplierName"/>
        <el-table-column label="订单号" align="center" prop="planReceipt"/>
        <el-table-column label="备注" align="center" prop="receiptNotes" :show-overflow-tooltip="true"/>
        <el-table-column label="创建者" align="center" prop="createBy"/>
        <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true">
          <template #default="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新者" align="center" prop="updateBy"/>
        <el-table-column label="更新时间" align="center" prop="updateTime" :show-overflow-tooltip="true">
          <template #default="scope">
              <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="120" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="打印" placement="top">
              <el-button
                link
                type="primary"
                icon="Printer"
                @click="printOut(scope.row)"
                v-hasPermi="['system:purchase:printOut']"
                ></el-button>
            </el-tooltip>
            <el-tooltip content="修改" placement="top">
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:purchase:update']"
                ></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:purchase:delete']"
                ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagination
        v-if="purchaseHead"
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 明细表数据 -->
      <el-table
        id="printTest"
        border
        v-if="purchaseDetail"
        v-loading="loading"
        :data="purchaseDetailOrderList">
        <el-table-column label="序号" align="center" type="index" width="60" />
        <el-table-column label="货品编号" align="center" prop="product.productCode"/>
        <el-table-column label="货品名称" align="center" prop="product.productName"/>
        <el-table-column label="货品类型" align="center" prop="type.productTypeName"/>
        <el-table-column label="规格" align="center" prop="product.productSpecifications"/>
        <el-table-column label="单位" align="center" prop="product.measureUnit"/>
        <el-table-column label="产地" align="center" prop="product.producer"/>
        <el-table-column label="数量" align="center" prop="planQuantity"/>
        <el-table-column label="单价" align="center" prop="univalence"/>
        <el-table-column label="折扣" align="center" prop="discount"/>
        <el-table-column label="金额" align="center" prop="money"/>
        <el-table-column label="成本" align="center" prop="money"/>
        <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true"/>
      </el-table>
      <!-- 分页组件 -->
      <pagination
        v-if="purchaseDetail"
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getDetailList"
      />
      </el-col>
    </el-row>

    <!-- 打印对话框 -->
    <!-- <el-dialog
      :title="title"
      :visible.sync="printFlag"
      v-model="openPrintSelect"
      width="70%"
      append-to-body
      :close-on-click-modal ="false"
      :show-close="false">
        <el-button type="danger" plain @click="printExcel">预览</el-button>
        <el-button type="success" plain v-print="'#printExcel'" ref="">打印</el-button>
        <el-button type="warning" plain @click="printSelectCancel">取 消</el-button>
      <div ref="printExcel" id="printExcel" ></div>
    </el-dialog> -->
  </div>
</template>

<script setup name="PurchaseDocumentQuery">
import { useRouter } from 'vue-router';
import { listWarehouse } from '@/api/basedate/warehouse';
import { listsUser } from '@/api/system/user';
import { listsSupplier } from '@/api/basedate/supplier';
import { listPurchaseOrder, listPurchaseDetailOrder, getPurchaseOrder, delWarehouseReceipt } from '@/api/system/purchase';

const { proxy } = getCurrentInstance();
const { receipt_type } = proxy.useDict("receipt_type");
const { receipt_status } = proxy.useDict("receipt_status");

// 查询结果表
const purchaseOrderList = ref([]);
const purchaseDetailOrderList = ref([]);
const userOptions = ref(undefined);
const supplierOptions = ref(undefined);
const warehouseOptions = ref(undefined);
const fileOptions = ref(undefined);
// 查询表展示
const purchaseHead = ref(true);
// 查询明细表展示
const purchaseDetail = ref(false);
// 打印窗口开关
const openPrintSelect = ref(false);
// 加载
const loading = ref(true);
// 总条数
const total = ref(0);
// 窗口标题
const title = ref("");
// 数据范围
const dateRange = ref([]);
// 打印类型
const printFlag = ref(false);
const router = useRouter();

const data = reactive({
  form: {},
  fileForm: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    systematicReceipt: undefined,
    originalReceipt: undefined,
    receiptType: undefined,
    receiptStatus: undefined,
    warehousingIds: undefined,
    retrievalIds: undefined,
    userIds: undefined,
    supplierIds: undefined,
    productCode: undefined,
    productName: undefined,
  },
  rules: {
    fileId: [{ required: true, message: "必须选择打印模板", trigger: "blur" }],
  },
});

const { queryParams, fileForm, form, rules } = toRefs(data);

function Options() {
  listWarehouse().then(response => {
    warehouseOptions.value = response.rows;
  });
  listsSupplier().then(response => {
    supplierOptions.value = response.rows;
  });
  listsUser().then(response => {
    userOptions.value = response.rows;
  });
};
/** 查询采购头单列表 */
function getList() {
  loading.value = true;
  listPurchaseOrder(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    purchaseOrderList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};
/** 查询采购明细单列表 */
function getDetailList() {
  loading.value = true;
  listPurchaseDetailOrder(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    purchaseDetailOrderList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};
/** 查询按钮操作 */
function handleQuery() {
  purchaseHead.value = true;
  purchaseDetail.value = false;
  queryParams.value.pageNum = 1;
  getList();
};
/** 明细查询按钮操作 */
function handleDetailQuery() {
  purchaseHead.value = false;
  purchaseDetail.value = true;
  queryParams.value.pageNum = 1;
  getDetailList();
};
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
};
/** 重置操作表单 */
function reset() {
  form.value = {
    originalReceipt: undefined,
    receiptType: undefined,
    warehousingIds: undefined,
    supplierIds: undefined,
    productCode: undefined,
    productName: undefined,
    fileId: undefined,
  };
  proxy.resetForm("queryRef");
  purchaseHead.value = true;
  purchaseDetail.value = false;
};
/** 确定模板按钮 */
function printOut(row) {
  proxy.$modal.msgWarning('打印模块开发中，尽情期待！')
};
/** 打印窗口取消按钮 */
function printSelectCancel() {
  openPrintSelect.value = false;
};
/** 修改按钮操作 */
function handleUpdate(row) {
  const systematicReceipt = row.systematicReceipt;
  const receiptType = row.receiptType;
  if (receiptType == 1){
    router.push({path: '/procure/WarehouseReceipt', query: {systematicReceipt}})
  } else if (receiptType == 2){
    router.push({path: '/procure/RetreatWarehouse', query: {systematicReceipt}})
  }

};
/** 删除按钮操作 */
function handleDelete(row) {
  const systematicReceipt = row.systematicReceipt;
  getPurchaseOrder(systematicReceipt).then(response => {
    const details = response.data.detail;
    proxy.$modal.confirm('确认要删除编号为' + systematicReceipt + '的采购单?').then(function () {
      return delWarehouseReceipt(details);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  })
};
/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/purchase/purchaseOrderExport", {
    ...queryParams.value,
  }, `采购单据表_${new Date().getTime()}.xlsx`);
};
/** 明细导出按钮操作 */
function handleDetailExport() {
  proxy.download("system/purchase/purchaseDetailOrderExport", {
    ...queryParams.value,
  }, `采购单据明细表_${new Date().getTime()}.xlsx`);
};
function printExcel(){
  // printFlag.value = true;
  // //这个只是个get方法获取后台的数据
  // TestFile().then(rep =>{
  //   const printExcel = document.getElementById('printExcel');
  //   printExcel.innerHTML = null;
  //   // this.$refs.printExcel.innerHTML = null;
  //   let pageStyle = `<style type="text/css">` +
  //                   "@media print" +
  //                   "{" +
  //                   "    table { page-break-after:auto }" +
  //                   "    tr    { page-break-inside:avoid; page-break-after:auto }" +
  //                   "    td    { page-break-inside:avoid; page-break-after:auto }" +
  //                   "    thead { display:table-header-group }" +
  //                   "    tfoot { display:table-footer-group }" +
  //                   "}";
  //   let s = rep.toString().replace(`<style type="text/css">`,pageStyle)
  //     .replace(`<table cellspacing="0">`,`<table cellspacing="0" style="margin:0 auto">`);
  //   printExcel.innerHTML = s;
  //   // this.$refs.printExcel.innerHTML = s;
  // })
};
getList();
Options();
</script>